<template>
	<div class="ui-form-item" :class="classname" :style="style">
		<div class="ui-form-item-left" :class="[iscolon,(issign && title)?'sign':'']" v-show="istitle" :style="fieldwidth?{width:fieldwidth+'px'}:{}">{{title}}</div>
		<div class="ui-form-item-right" :style="ispadding">
			<slot></slot>
			<div class="ui-form-error" v-if="error">{{error}}</div>
		</div>
	</div>
</template>

<script>
	/*
	组件属性[
		classname:类名
		style:样式
		title:字段名
		fieldwidth:字段名宽度
		istitle:是否显示字段名 true(默认)/false
		issign:是否标记*号 true/false
	]
	组件事件[
		submit:选项发生改变时回调的父组件方法，callback(obj[当前分数])
	]
	*/
	export default{
		props:{
			'classname':{type:null,defalut:""},
			'name':{type:null,defalut:""},
			'style':{type:null,default:""},
			'title':{type:String,default:""},
			'fieldwidth':{type:Number,default:""},
			'istitle':{type:Boolean,default:true},
			'issign':{type:Boolean,default:false},
		},
		data(){
			return {
				uiType:"ui-form-item",
				error:"",
				child:{}
			}
		},
		computed:{
			iscolon(){
				if(!this.title){
					return 'ui-form-item-left-empty';
				}else{
					return '';
				}
			},
			ispadding(){
			    if(!this.istitle){
                    return {paddingLeft:0};
				}else if(this.fieldwidth){
			        return {paddingLeft:this.fieldwidth+"px"};
				}else{
				    return {}
				}
			}
		},
        mounted(){
            this.$nextTick(function () {
                let formData={};
                for(let i=0;i<this.$children.length;i++){
                    let o=this.$children[i];
                    if(o.name){
                        formData[o.name]=o;
                    }
                }
                this.child=formData;
            });
        }
	}
</script>
